import { PureComponent } from 'react';
import './index.less'
import Lazyimg from 'react-lazyimg-component';
import loadingpng from '@/assets/loading.png';
class Menus extends PureComponent {
    render() {
        let { menus } = this.props;
        return (
            <div className="menus">
                {
                    menus.length != 0 && menus.map((item) => {
                        return (
                            <div className="item" key={item.id}>
                                <Lazyimg className="lazy" src={item.pic} placeholder={<img src={loadingpng} alt='加载失败' />} />
                                <div>
                                    {item.name}
                                </div>
                            </div>
                        )
                    })
                }
                {
                    menus.length == 0 && Array.from({ length: 10 }).map((item, index) => {
                        return <div className="item" key={index}>
                            <img src={loadingpng} alt="" />
                        </div>
                    })
                }
            </div>
        )
    }
}
export default Menus;